var graph = new joint.dia.Graph;
//自定义link
joint.shapes.standard.Link.define('app.Link', {
    router: {
        name: 'normal'
    },
    labels: [],
    attrs: {
        line: {
            stroke: '#20C1DD',
            strokeDasharray: '0',
            strokeWidth: 2,
            fill: 'none',
            sourceMarker: {
                type: 'path',
                d: 'M 0 0 0 0',
                stroke: 'none'
            },
            targetMarker: {
                type: 'path',
                d: 'M 0 -5 -10 0 0 5 z',
                stroke: 'none'
            }
        }
    }
}, {

    getMarkerWidth: function(type) {
        var d = (type === 'source') ? this.attr('line/sourceMarker/d') : this.attr('line/targetMarker/d');
        return this.getDataWidth(d);
    },

    getDataWidth: _.memoize(function(d) {
        return (new g.Path(d)).bbox().width;
    })

}, {

    connectionPoint: function(line, view, magnet, opt, type, linkView) {
        var markerWidth = linkView.model.getMarkerWidth(type);
        opt = { offset: markerWidth, stroke: true };
        // connection point for UML shapes lies on the root group containg all the shapes components
        if (view.model.get('type').indexOf('uml') === 0) opt.selector = 'root';
        return joint.connectionPoints.boundary.call(this, line, view, magnet, opt, type, linkView);
    }
});

var paper = new joint.dia.Paper({
    width: 2000,
    height: 1500,
    model: graph,
    gridSize: 10,
    snapLinks: true,
    linkPinning: false,
    defaultLink: new joint.dia.Link({
        // router: { name: 'manhattan' },
        //    connector: { name: 'rounded' },
        smooth: true,
        attrs: {
            '.connection': {
                stroke: '#20C1DD',
                'stroke-width': 2,
                //  'stroke-dasharray': '5 2',
                pointerEvents: 'none',
            },
            '.marker-target': {
                fill: '#20C1DD',
                stroke: '#fff',
                d: 'M 10 0 L 0 5 L 10 10 z'
            }
        },
    }),
    defaultConnectionPoint: joint.shapes.app.Link.connectionPoint

});
//paper背景
var bgimage = '';
paper.drawBackground({
    image : bgimage
});

//控制纸张
var paperScroller = new joint.ui.PaperScroller({
    paper: paper,
    autoResizePaper: true,
    padding: 50,
    cursor: 'grab'
});
// 移动纸张
paper.on('blank:pointerdown', paperScroller.startPanning);
$('#paper').append(paperScroller.render().el);
paperScroller.center();    //移动到页面的中间


var commandManager = new joint.dia.CommandManager({
    graph: graph
});

//提示实例
new joint.ui.Tooltip({
    rootTarget: document.body,
    target: '[data-tooltip]',
    padding: 15
});


//鹰眼开始
var nav = new joint.ui.Navigator({
    paperScroller: paperScroller,
    width: 133,
    height: 100,
    padding: 5,
    model: graph,
    gridSize: 1,
});
nav.$el.appendTo('#myholder-small');
nav.render();
//小图结束


//tooltip模块
new joint.ui.Tooltip({
    target: '[data-tooltip]',
    rootTarget: document.body,
    direction: 'auto',
    padding: 15,
});

$.ajax({
    url : '/rest/dxflowCharting/guide',
    type : 'GET',
    dataType : 'JSON',
    success : function (result) {
        console.log(result);
        var graphArr = [];
        $.each(result.object.vertex,function (i, v) {
       
        	var tableObj = new joint.shapes.basic.Image({
        		id:v.vertexId,
        	    position: { x: 800, y: 500 },
        	    size: { width: 80, height: 80 },
        	    attrs: {
        	        image: { width: 25, height: 25, 'xlink:href': '/assets/custom/draw/img/database.svg'},
        	        text: {"ref-y": -10,text: v.name},
        	    },
        	    description: 'image'
        	    	
        	});
            graphArr.push(tableObj)
        });

        $.each(result.object.lines,function (i, v) {
            var linkArr = new joint.shapes.app.Link({
                "source":{"id":v.from},
                "target":{"id":v.to},
                //  "router":{"name":"manhattan"},
                //  "connector":{"name":"rounded"},
                smooth: true,
                "id":v.lineId,
                "attrs":{
                    ".connection":{"stroke":"#20C1DD","stroke-width":2,"pointerEvents":"none"},
                    ".marker-target":{"fill":"#20C1DD","stroke":"#20C1DD","d":"M 10 0 L 0 5 L 10 10 z"},
                    "rowsizeInc" : v.rowsizeInc ? v.rowsizeInc : "",
                    "rowsizeTotal" : v.rowsizeTotal?v.rowsizeTotal:'',
                    'isdata' : v.isdata,
                }
                ,
                "labels": [
                    {"position": 0.5, "attrs": {"text": {"text": v.name}}}
                ],
                '.tool-remove' : null
            });
            graphArr.push(linkArr);
        });

        graph.addCell(graphArr);
        joint.layout.DirectedGraph.layout(graph, {
            setLinkVertices: false,
            marginX: 500,
            marginY: 500,
            rankSep : 150,
            rankDir: "LR",
            ranker : '500px'
        });
        paperScroller.centerContent();
    }
});


